提醒

我這邊目前是使用平面的地圖，後續會開始增加3D的地形圖，等到時候咱們再來看一次GPX有紀錄高程貼合在地圖上面的感覺，現在的我們只能看到一個飛起來的GPX檔案，只可遠看而已。

主要就是了解一下GPX和KML在Cesium中如何去設定~~

JS

// 創建Cesium Viewer實例
      var viewer = new Cesium.Viewer("cesiumContainer", {
        imageryProvider: false, // 關閉預設的影像圖層
        animation: false,
        timeline: false,
        infoBox: false, // 隱藏信息框
        selectionIndicator: false, // 隱藏選擇指示器
        navigationHelpButton: false, // 隱藏導航幫助按鈕
        geocoder: false, // 隱藏地理編碼搜尋框
        homeButton: false, // 隱藏首頁按鈕
        sceneModePicker: false, // 隱藏2D/3D切換按鈕
        baseLayerPicker: false, // 隱藏圖層選擇器
        fullscreenButton: false, // 隱藏全螢幕按鈕
        vrButton: false, // 隱藏VR模式按鈕
        creditsDisplay: false, // 隱藏版權信息
      });

      // 添加WMTS圖層
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: "https://wmts.nlsc.gov.tw/wmts/EMAP5/default/EPSG:3857/{z}/{y}/{x}.png",
          tilingScheme: new Cesium.WebMercatorTilingScheme(),
          maximumLevel: 18,
        })
      );

      // 設定視角到台灣
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(120.9, 23.7, 800000.0),
      });

      // 加載 KML 文件
      Cesium.KmlDataSource.load("20240821雪山北峰單攻.kml")
        .then(function (dataSource) {
          viewer.dataSources.add(dataSource);
        })
        .catch(function (error) {
          console.log("KML 載入失敗:", error);
        });

      // 加載 GPX 文件
      Cesium.GpxDataSource.load("浸水營.gpx")
        .then(function (dataSource) {
          viewer.dataSources.add(dataSource);
        })
        .catch(function (error) {
          console.log("GPX 載入失敗:", error);
        });

參考

Github